<template>
  <div>
    <!-- 注册 / 验证码登录 -->
    <div class="logo">
      <img src="@/assets/images/login.png" alt="" />
    </div>
    <form>
      <div :class="{ active: active == 1 }">
        <input
          type="text"
          placeholder="请输入手机号"
          @blur="active = ''"
          @focus="active = 1"
          v-model="form.mobile"
        />
        <div style="width: 260px" v-if="flag" @click="sendcode">获取验证码</div>

        <div v-else style="width: 360px; color: #999">
          获取验证码({{ timer }})
        </div>
      </div>

      <div :class="{ active: active == 2 }">
        <input
          type="text"
          placeholder="请输入短信验证码"
          @blur="active = ''"
          @focus="active = 2"
          v-model="form.sms_code"
        />
      </div>

      <div style="color: #999; font-size: 20px">
        <p>*未注册的手机号将自动注册</p>
        <p>使用密码登录</p>
      </div>
      <div class="login" @click="tologin">
        <p>登录</p>
      </div>
      <p @click="Setpassword">Setpassword</p>
    </form>
  </div>
</template>

<script>
// import {Toast} from "vant"
 const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

import { getSmsCode ,postLogin} from "@/http/request";
export default {
  data() {
    return {
      active: "",
      flag: true,
      timer: 6,
      form: {
        mobile: "",
        sms_code:"",
        sms_type: "login",
        type:2, //验证码登录
        client:1,

      },
    };
  },

  mounted() {},

  methods: {
    // 点击发送验证码
    async sendcode() {
      // 验证 是否是 手机号
    //   console.log(this.form.mobile);
      if (!reg.test(this.form.mobile)) {
        //不是手机号--提示
        // alert("不是手机号");
        this.$Toast.fail("不是手机号");
      } else {
        // 是手机号
        this.flag = false;
        // 调用 获取 验证码 接口
        let res = await getSmsCode(this.form);
        // console.log(res);
        const t = setInterval(() => {
          if (this.timer > 0) {
            this.timer--;
          } else {
            this.timer = 6;
            this.flag = true;
            clearInterval(t);
          }
        }, 1000);
      }
    },
    Setpassword(){
      this.$router.push('Setpassword')
    },
    //点击登录
   async tologin(){
      // 获取手机号
      // 获取短信验证码
    //验证 不能为空  -- 调用接口
    if( this.form.mobile && this.form.sms_code.length >=6  && reg.test(this.form.mobile)){
      // console.log(this.form.mobile ,  this.form.sms_code )
    const res = await postLogin(this.form);
    // console.log(res);
  if(res.data.code ==200 ){
 localStorage.setItem("msmktoken",res.data.data.remember_token)
 if(res.data.data.is_new == 1){
  // 跳转到 修改 密码 ===》可以通过 用户名密码登录
  this.$router.push({name:"setpassword",params:{mobile:this.form.mobile,sms_code:this.form.sms_code}})
 }else{
  // 跳转到 个人中心 --->跳转到个人中心页面
 }
  }else{
     this.$Toast(res.data.msg)
  }
    }else{
      this.$Toast("请输入正确的手机号验证码")
    }
      //  成功-- 返回值--保存token 
      //  失败-- 提示
    }
  },
};
</script>

<style lang="scss" scoped>
.logo {
  width: 100vw;
  height: 200px;
  text-align: center;

  img {
    width: 525px;
    height: 115px;
    margin: 50px;
  }
}

form {
  font-size: 30px;
  > div {
    width: 80vw;
    display: flex;
    justify-content: space-between;
    // padding: 0 50px;
    margin: 50px auto;
  }
  input {
    border: none;
    width: 100%;
  }
}

.active {
  border-bottom: 1px solid red;
}
.login {
  width: 80vw;
  height: 50px;
  border-radius: 20px;
  // background: palevioletred;
  background: url("@/assets/theme-img/login-btn.png") no-repeat 100%;
  p {
    margin: 0 auto;
  }
}
</style>